Evenly distributed child element-CSS Examples

The child elements are evenly distributed among the parent elements.

HTML CODE:

<div class="evenly-distributed-children">
    <p>Item1</p>
    <p>Item2</p>
    <p>Item3</p>
</div>

CSS CODE:

.evenly-distributed-children {
  display: flex;
  justify-content: space-between;
}

Description

1. display: flex Enable the elastic case.
2. justify-content: space-between Sub-elements are evenly distributed horizontally. The first item is on the left edge and the last item is on the right edge.

Or, use justify-content: space-around to allocate space to child elements, not between them.